<template>
  <div class="inStock-box">
    <el-row :gutter="20" type="flex">
        <!-- 表格-->
        <el-col :span="24" class="tableBox">
            <NewCard :isright="true" :border="false" title="入库管理" class="table">
                <template slot="right">
                    <el-select v-model="selectValue" placeholder="请选择">
                        <el-option label="来源" value="1"></el-option>
                        <el-option label="URL" value="2"></el-option>
                    </el-select>
                    <el-select v-model="selectType" placeholder="类型">
                        <el-option
                            v-for="(item,index) in selectFrom"
                            :key="item.id+index"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button class="search" round @click="clickSearch">搜索</el-button>
                    <el-button round @click="reset">重置</el-button>
                    <el-button round @click="clickAdd">新增</el-button>
                </template>
                <!-- 表格 -->
                <el-table
                    :data="tableList"
                    highlight-current-row
                    style="width: 100%"
                    @row-click="rowClick">
                    <el-table-column
                        prop="name"
                        show-overflow-tooltip
                        label="名称">
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="类型"
                        width="80">
                        <template slot-scope="scope">
                            <p>{{getTypeTxt(scope.row.type)}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="url"
                        show-overflow-tooltip
                        label="URL">
                        <template slot-scope="scope">
                            <p class="urlp">{{scope.row.url}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="currentNumber"
                        label="当前条数"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="todayAdded"
                        label="今日新增"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="weekAdded"
                        label="本周新增"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="monthAdded"
                        label="本月新增"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="functionTime"
                        show-overflow-tooltip
                        label="最近运行时间"
                        width="180">
                        <template slot-scope="scope">
                            <p class="timep">{{scope.row.functionTime?scope.row.functionTime:'--'}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="remark"
                        label="备注"
                        show-overflow-tooltip
                        width="80">
                    </el-table-column>
                </el-table>

                <!-- 分页器 -->
                <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40]"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageing.total">
                    </el-pagination>
                </div>
            </NewCard>
        </el-col>
        <!-- 编辑 -->
        <!-- <el-col :span="9" class="editFromBox">
            <NewCard :isright="true" :title="isAddOrEdit?'新增':'编辑'" class="table">
                <el-form ref="form" :model="editFrom" label-width="80px" label-position="left">
                    <el-form-item label="名称">
                        <el-input v-model="editFrom.name" placeholder="请输入来源"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-select v-model="editFrom.type" placeholder="请选择">
                            <el-option
                                v-for="(item,index) in selectFrom"
                                :key="item.id+index"
                                :label="item.title"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="URL">
                        <el-input v-model="editFrom.url" placeholder="请输入网址"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="editFrom.remark" placeholder="请输入…"></el-input>
                    </el-form-item>
                </el-form>

                <SubBtn>
                    <template slot="btn">
                        <el-button round @click="clickAddBtn" v-hasPermi="['assess:craw:add']">新增</el-button>
                        <el-button round @click="clickResetBtn">重设</el-button>
                        <el-button type="primary" round class="addBtn" @click="clickSaveBtn" v-hasPermi="['assess:craw:edit']">保存</el-button>
                    </template>
                </SubBtn>
            </NewCard>
        </el-col> -->
    </el-row>

    <!-- 编辑弹框 @close="addOrEditClose" -->
    <el-drawer
      :title="isAddOrEdit?'新增':'编辑'"
      size="40%"
      :visible.sync="addOrEditDrawer"
      class="addTaskClass">
        <el-form ref="form" class="editFrom-box" :model="editFrom" label-width="80px" label-position="left">
            <el-form-item label="名称">
                <el-input v-model="editFrom.name" placeholder="请输入来源"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="editFrom.type" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in selectFrom"
                        :key="item.id+index"
                        :label="item.title"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="URL">
                <el-input v-model="editFrom.url" placeholder="请输入网址"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="editFrom.remark" placeholder="请输入…"></el-input>
            </el-form-item>
        </el-form>

        <!-- 按钮 -->
        <SubBtn>
            <template slot="btn">
                <el-button round @click="clickAddBtn" v-hasPermi="['assess:craw:add']">新增</el-button>
                <el-button round @click="clickResetBtn">重设</el-button>
                <el-button type="primary" round class="addBtn" @click="clickSaveBtn" v-hasPermi="['assess:craw:edit']">保存</el-button>
            </template>
        </SubBtn>
    </el-drawer>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";

import {getCrawListApi,editCrawApi,addCrawApi} from "@/wss/newApi_3-24/assess/craw.js"
export default {
    name:'inStock',
    components:{NewCard,SubBtn},
    data(){
        return{
            // 分页
            pageing: { pageNum: 1, pageSize: 10, total: 0 },
            // 筛选框
            selectFrom:[
                {
                    title: '解答',
                    id: '2',
                },{
                    title: '政策',
                    id: '3',
                },{
                    title: '法条',
                    id: '1',
                },
            ],
            selectValue: '1', //来源或者url
            selectType: '',//类型
            //表格数据
            tableList:[],
            
            // ---------------编辑---------------
            addOrEditDrawer: false,//弹出框显示隐藏
            isAddOrEdit: true,
            editFrom:{
                name: '',
                type: '2',
                url: '',
                remark: '',// 备注
            },
            tsEditData: {},//暂存的数据
        }
    },
    mounted(){
        this.getCrawList() //获取入库管理分页查询
    },
    methods:{
        // 获取入库管理分页查询
        async getCrawList(){
            let {pageNum,pageSize} = this.pageing
            let type = this.selectType
            let groupType = this.selectValue
            let result = await getCrawListApi({pageNum,pageSize,type,groupType})
            if(result.code==200){
                this.tableList = result.rows
                this.pageing.total = result.total
            }
        },
        
        // 每页多少条
        handleSizeChange(val){
            this.pageing.pageSize = val
            this.getCrawList() //获取入库管理分页查询
        },

        // 当前第几页
        handleCurrentChange(val){
            this.pageing.pageNum = val
            this.getCrawList() //获取入库管理分页查询
        },

        // 点击搜索按钮
        clickSearch(){
            this.getCrawList() //获取入库管理分页查询
        },

        // 点击重置
        reset(){
            this.selectValue = '' //来源或者url
            this.selectType = '' //类型
            this.getCrawList() //获取入库管理分页查询
        },

        // 获取类型
        getTypeTxt(type){
            const stateMap = {
                1: "法条",
                2: "解答",
                3: "政策",
                // 4: "合同",
            };
            return stateMap[type];
        },

        // 点击某一行
        rowClick(row){
            this.addOrEditDrawer = true //弹出框显示隐藏
            this.isAddOrEdit = false
            this.editFrom = JSON.parse(JSON.stringify(row)) //编辑表单
            this.tsEditData = JSON.parse(JSON.stringify(row)) //暂存的数据
        },

        // 修改入库管理
        async editCraw(){
            let result = await editCrawApi(this.editFrom)
            if(result.code==200){
                this.$message({type: 'success',message:'修改成功'})
            }
        },

        // 添加库管理
        async addCraw(){
            let result = await addCrawApi(this.editFrom)
            if(result.code==200){
                this.$message({type: 'success',message:'添加成功'})
            }
        },

        // 点击新增按钮
        clickAddBtn(){
            this.isAddOrEdit = true
            this.editFrom = {
                name: '',
                type: '2',
                url: '',
                remark: '',// 备注
            }
        },

        // 点击表格的新增
        clickAdd(){
            this.isAddOrEdit = true
            this.editFrom = {
                name: '',
                type: '2',
                url: '',
                remark: '',// 备注
            }
            this.addOrEditDrawer = true //弹出框显示隐藏
        },

        // 点击保存按钮
        async clickSaveBtn(){
            if(this.isAddOrEdit){
                // 判断能否添加
                if(this.editFrom.name=='' || this.editFrom.url==''){
                    this.$message({type: 'warning',message:'请填写完整'})
                    return
                }
                // 新增
                await this.addCraw() //添加接口
                this.getCrawList() //重新获取入库管理分页查询
                // 清空数据
                this.editFrom = {
                    name: '',
                    type: '2',
                    url: '',
                    remark: '',// 备注
                }
                this.addOrEditDrawer = false //弹出框显示隐藏
            }else{
                // 判断能否编辑
                if(this.editFrom.name=='' || this.editFrom.url==''){
                    this.$message({type: 'warning',message:'请填写完整'})
                    return
                }
                // 编辑
                await this.editCraw() //修改接口
                await this.getCrawList() //重新获取入库管理分页查询
                this.addOrEditDrawer = false //弹出框显示隐藏
            }
        },

        // 点击重设按钮
        clickResetBtn(){
            if(this.isAddOrEdit){
                // 新增的
                // 清空数据
                this.editFrom = {
                    name: '',
                    type: '2',
                    url: '',
                    remark: '',// 备注
                }
            }else{
                // 编辑的 还原旧数据
                this.editFrom = JSON.parse(JSON.stringify(this.tsEditData))
            }
        },

    }
}
</script>


<style scoped lang="scss">
/* 入库管理样式 */
.inStock-box{
    height: calc(100% - 60px);
}
.el-row{
    height: 100%;
}

// 表格
.el-table {
    .cell{
        .urlp{
            color: #598DED;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow:ellipsis;
        }
        .timep{
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow:ellipsis;
        }
    }
}

.el-form{
    margin-bottom: 50px;
}

.editFrom-box{
    padding: 0 20px;
}

// 分页器
.pagination{
    text-align: center;
    margin: 15px 0;
}


</style>
<style scoped>
.editFromBox >>> .el-card{
    position: relative;
}

.inStock-box >>> .el-card__body{
    height: 100%;
}

.inStock-box >>> .el-card__body>div{
    height: calc(100% - 45px);
    overflow-y: auto;
}
.inStock-box >>> .el-card__body>div::-webkit-scrollbar{
    width: 0;
}

/* 选择框 */
.tableBox .el-select{
    width: 130px;
    margin-right: 10px;
}
.tableBox .el-select >>> .el-input__inner{
    padding-left: 10px;
}
.tableBox .el-button{
    padding: 5px 15px;
}
.tableBox .search{
    background-color: #F87A23;
    border-color: #F87A23;
    color: #fff;
}

/* 表格样式 */
::v-deep .el-table::before{
    height: 0;
}
/* 表格输入框 */
::v-deep .tableInput .el-input__inner{
    border: 0;
    padding: 0;
}

::v-deep .el-table .el-table__header-wrapper th{
  background-color: #fff;
}
::v-deep .el-table th.is-leaf{
  border-top: 1px solid #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
}
::v-deep .el-table th > .cell{
  font-size: 12px;
  color: #909AAA;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p{
  margin: 0;
  font-size: 14px;
  color: #2E3F5E;
}
::v-deep .el-table .cell .el-button{
  color: #F87A23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before{
  content: "\E791";
}
::v-deep .el-table td{
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight{
  color: #F87A23;
  cursor: pointer;
}
::v-deep .el-table .el-table__expanded-cell[class*=cell]{
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before{
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf{
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td{
  border-bottom: 0;
}
::v-deep .el-table__body tr.current-row > td{
    background-color: #f3f3f3;
}
/* 表格样式 end */

/* 表单 */
.el-form .el-select{
    width: 100%;
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px;
  z-index: 2001;
}
::v-deep .subBtn .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn .el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

/* 抽屉样式 */
::v-deep .el-drawer__header {
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
::v-deep .el-drawer__header > span {
  font-size: 18px;
  font-weight: 400;
  color: #2e3f5e;
  padding-left: 20px;
  background: url("~@/wss/assets/image/icon/cardLeft.png") left center no-repeat;
  background-size: 7px;
}
</style>